import './piechart.scss'
import React, { useCallback, useState } from 'react'
import { PieChart, Pie, Cell, Sector, Legend } from 'recharts'
import { isArray, isEmpty, get, assign } from 'lodash'

const data = [
  {
    name: '部署',
    value: 40,
    metric_name: 'workspace_deployment_count',
  },
  {
    name: '任务',
    value: 30,
    metric_name: 'workspace_job_count',
  },
  {
    name: '服务',
    value: 30,
    metric_name: 'workspace_service_count',
  },
  // {
  //   name: '容器',
  //   value: 20,
  // },
]
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']

const renderActiveShape = props => {
  const RADIAN = Math.PI / 180
  const {
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    fill,
    payload,
    percent,
    value,
  } = props
  const sin = Math.sin(-RADIAN * midAngle)
  const cos = Math.cos(-RADIAN * midAngle)
  const sx = cx + (outerRadius + 10) * cos
  const sy = cy + (outerRadius + 10) * sin
  const mx = cx + (outerRadius + 30) * cos
  const my = cy + (outerRadius + 30) * sin
  const ex = mx + (cos >= 0 ? 1 : -1) * 22
  const ey = my
  const textAnchor = cos >= 0 ? 'start' : 'end'

  return (
    <g>
      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
        {payload.name}
      </text>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={outerRadius + 6}
        outerRadius={outerRadius + 10}
        fill={fill}
      />
      <path
        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
        stroke={fill}
        fill="none"
      />
      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
      <text
        x={ex + (cos >= 0 ? 1 : -1) * 12}
        y={ey}
        textAnchor={textAnchor}
        fill="#333"
      >{`数量 ${value}`}</text>
      <text
        x={ex + (cos >= 0 ? 1 : -1) * 12}
        y={ey}
        dy={18}
        textAnchor={textAnchor}
        fill="#999"
      >
        {`(Rate ${(percent * 100).toFixed(2)}%)`}
      </text>
    </g>
  )
}

export default function App(props) {
  const resourceData = props.resourceData
  console.log(data, resourceData, 'data')

  data.forEach(item1 => {
    resourceData.forEach(item2 => {
      if (item1.metric_name === item2.metric_name) {
        const result = item2?.data?.result?.[0]?.values?.[0] || []
        item1.value = Number(result?.[1] || 0)
      }
    })
  })

  const [activeIndex, setActiveIndex] = useState(0)
  const onPieEnter = useCallback(
    (_, index) => {
      setActiveIndex(index)
    },
    [setActiveIndex]
  )

  return (
    <PieChart width={660} height={200}>
      <Pie
        activeIndex={activeIndex}
        activeShape={renderActiveShape}
        data={data}
        cx={180}
        cy={90}
        innerRadius={40}
        outerRadius={55}
        fill="#8884d8"
        dataKey="value"
        onMouseEnter={onPieEnter}
      >
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <div>{activeIndex}</div>
      <Legend
        iconSize={15}
        wrapperStyle={{
          top: '40%',
          right: '28%',
          transform: 'translate(0, -50%)',
          lineHeight: '24px',
        }}
        // content={renderLegend}
        layout="vertical"
        verticalAlign="middle"
      />
    </PieChart>
  )
}
